<template>
	<view class="container">		
		<view class="guess-section">
			<!-- 体验课列表 -->
			<view class="f-header m-t"  v-for="(item, index) in courseList" :key="index">
				<image :src="item.image"></image>
				<view class="tit-box">
					<text class="tit">{{item.name}}</text>
					<text class="price">￥{{item.price}}<text class="desc"> &nbsp;&nbsp;&nbsp;&nbsp;{{item.desc}}</text></text>
				</view>
				<text class="yticon icon-you"  @click="navToDetailPage({id: '1'})"></text>
			</view>
			</view>
		</view>
	</view>
</template>

<script>
	import service from '../../service.js';
	export default {
		data() {
			return {
				courseList:[] //教练列表
			};
		},
		async onLoad(){
			this.loadData();
		},
		methods:{
			/**
			 * 体验课列表
			 */
			async loadData() {
				var [error, res] = await uni.request({
					method:'POST',
					url: service.baseUrl+'/api/home/getCourseList', 
					data: {},
					header: {'Content-Type': 'application/json'}
				});
				if(res.data.code=200){
					//教练列表
					this.courseList=res.data.data;
				}else{
					 uni.showToast({
					    icon: 'error',
					    title: res.data.message,
					});
				}
			},
			/**
			 * 根据体验课Id跳转体验课详情
			 * @param {Object} item
			 */
			navToDetailPage(item) {
				let id=item.id;
				//跳转商品详情页面
				uni.navigateTo({
					url: `/pages/product/product?id=`+id
				})
				
			}
		}
	}
</script>

<style lang="scss">
 
     .guess-section{
		border-top: 1px solid #d8d8d8; 
	 }
	.f-header{
		display:flex;
		align-items:center;
		height: 140upx;
		padding: 6upx 30upx 8upx;
		background: #fff;
		border-bottom: 1px solid #d8d8d8;
		image{
			flex-shrink: 0;
			width: 100upx;
			height: 100upx;
			margin-right: 20upx;
		}
		.tit-box{
			flex: 1;
			display: flex;
			flex-direction: column;
		}
		.tit{
			font-size: $font-lg;
			color: #font-color-dark;
			line-height: 1.3;
		}
		.tit2{
			font-size: $font-sm;
			color: $font-color-light;
		}
		.icon-you{
			font-size: $font-lg +2upx;
			color: $font-color-light;
		}
	}
	.price{
		color:$uni-color-primary;
	}
	.m-price{
		font-size: $font-sm+2upx;
		text-decoration: line-through;
		color: $font-color-light;
		margin-left: 8upx;
	}
	.desc{
		padding-left: 20upx;
		font-size: $font-sm;
		color: $font-color-light;
	}
</style>
